<template>
  <a-card class="mb-6 w-60 h-60" :title="good.c_name">
    <template #extra>
      <div
        class="flex items-center overflow-hidden transition-transform duration-200 ease-out transform cursor-pointer hover:scale-110"
        :class="[inputNumVal && deliveryDate ? 'scale-100' : 'scale-0']"
        @click="handleClick"
      >
        <span
          class="mr-1"
          
          >加入清单</span
        >
        <PlusCircleOutlined />
      </div>
    </template>
    <a-statistic
      class="text-red-300"
      prefix="￥"
      :precision="2"
      :value="good.c_price"
      :valueStyle="{ color: 'red' }"
    ></a-statistic>
    <div class="absolute left-0 flex justify-around w-full gap-3 px-2 bottom-2">
      <a-date-picker placeholder="送货日期" v-model:value="deliveryDate" />
      <a-input-number
        size="small"
        :min="0"
        v-model:value="inputNumVal"
        @change="handleInputNumChange"
      />
    </div>
  </a-card>
</template>

<script lang="ts" setup>
import type { PropType } from "vue"
import type { Good,GoodInfo } from "@/interface/good"
import type { Moment } from "moment"
import { ref, defineProps } from "vue"
import { PlusCircleOutlined } from "@ant-design/icons-vue"
import {useGoodsStore} from '@/store/modules/goods'

const goodsStore = useGoodsStore()
const props = defineProps({
  good: {
    type: Object as PropType<Good>,
    required: true,
    default: () => ({}),
  },
})
const good = props.good
const deliveryDate = ref<Moment>()
const inputNumVal = ref(0)

const handleInputNumChange = (val: number | string) => {
  if (val < 0 || val === "" || typeof val !== "number") {
    inputNumVal.value = 1
    return
  }
  
}
const handleClick = () => {
  if(!deliveryDate.value) return 
  const goodFormat: GoodInfo = {...good,num: inputNumVal.value,deliveryDate:deliveryDate.value }
  goodsStore.changeListing(goodFormat)
}
</script>
<style scoped></style>
